<!DOCTYPE html>
<html lang="cn">

<head>
  <meta charset="UTF-8">
  <script src="./rem.js"></script>
  <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1.0,maximum-scale=1.0"> -->
  <meta name="format-detection" content="telephone = no">
  <meta name="viewport"
    content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>
  <link rel="stylesheet" href="./common.css">
  <link rel="stylesheet" href="./newVote.css">
  <script>
    function rembig() {
      setRemSize()
      window.addEventListener("resize", setRemSize, false)
      function setRemSize() {
        var width = document.documentElement.clientWidth
        if (width > 750) {
          width = 750
        }
        var _clientWidth = width / 7.5 + 'px'
        document.documentElement.style.fontSize = _clientWidth
      }
    }
    rembig()
  </script>
</head>

<body>
<div class="container">
  <div class="header">
    <div class="group home">
      <img src="./images/newVote/home_per_icon.png">
      <span>首页</span>
    </div>
    <div class="input">
      <input type="text" class="searching" placeholder="快速找到你喜爱的品牌" />
    </div>
    <div class="group encyclopedias">
      <img src="./images/newVote/bkzs_pre_icon.png">
      <span>百科</span>
    </div>
  </div>
  <ul class="searchHistoryList">
    <!-- <li>
      <div>
        <img src="../images/detailsOfBrand/wks_ssh_icon.png" alt="" srcset="">
        <span>正太正太正太</span>
      </div>
      <img src="../images/detailsOfBrand/mjtzx_btn_icon.png" alt="" srcset="" >
    </li> -->
  </ul>
  <div class="content">
    <div class="bannerBox">
      <p class="selection">十大品牌评选</p>
      <p class="tradeName">美妆护理珠宝行业</p>
      <a class="button">参加活动</a>
    </div>
    <div class="rollingNotification rollingNotificationHome">
      <img src="http://wx.10pinpaiwang.com/skin/default/vote/images/vote/gonggao.png" alt="" srcset="">
      <div class="rollingContainer">
        <marquee class="rollingContent" scrollamount="2" behavior="scroll">凝聚行业力量，助力品牌中国。2019年度中国松木家具十大品牌评选活动火热进行中！</marquee>
      </div>
      <div class="activityDetails">
        <p>活动</p>
        <p>详情</p>
      </div>
    </div>
    <div class="list">
      <a class="item">
        <div class="left">
          <div class="logoGroup" style="border:0.06rem solid rgba(250,224,75,1);">
            <div class="topThree">
              <img src="./images/list/bdxq_jpy_icon.png" alt="" srcset="">
            </div>
            <img class="logo" src="" alt="" srcset="" style="background: pink">
          </div>
        </div>
        <div class="center">
          <div class="title needEllipsis">长沙碳矿机械厂长沙碳矿机械厂</div>
          <!-- <div class="votes">13212票</div> -->
        </div>
        <div class="right">
          <div class="text">活动未开始~</div>
          <!-- <div class="button">投票投票</div> -->
        </div>
      </a>
      <a class="item">
        <div class="left">
          <div class="logoGroup" style="border:0.06rem solid rgba(211,209,209,1);">
            <div class="topThree">
              <img src="./images/list/bdxq_jpy_icon.png" alt="" srcset="">
            </div>
            <img class="logo" src="" alt="" srcset="" style="background: pink">
          </div>
        </div>
        <div class="center">
          <div class="title needEllipsis">长沙碳矿机械厂长沙碳矿机械厂</div>
          <div class="votes down">13212票</div>
        </div>
        <div class="right">
          <div class="button">投票投票</div>
        </div>
      </a>
      <a class="item">
        <div class="left">
          <div class="logoGroup"  style="border:0.06rem solid rgba(244,174,131,1);">
            <div class="topThree">
              <img src="./images/list/bdxq_jpy_icon.png" alt="" srcset="">
            </div>
            <img class="logo" src="" alt="" srcset="" style="background: pink">
          </div>
        </div>
        <div class="center">
          <div class="title needEllipsis">b长沙碳矿机械厂</div>
          <div class="votes up">13212票</div>
        </div>
        <div class="right">
          <div class="button">投票投票</div>
        </div>
      </a>
      <a class="item">
        <div class="left">
          <div class="logoGroup logoGroupNotTopThree"  style="border:0.06rem solid rgba(211,209,209,1);">
            <div class="threeToTen theLastThreeBase">06</div>
            <img class="logo" src="./images/list/bd_dwy_img.png" alt="" srcset="" style="background: pink">
          </div>
        </div>
        <div class="center">
          <div class="title needEllipsis">a长沙碳矿机械厂长沙碳矿机械厂</div>
          <div class="votes">13212票</div>
        </div>
        <div class="right">
          <div class="text">已结束~</div>
        </div>
      </a>
      <a class="item">
        <div class="left">
          <div class="logoGroup logoGroupNotTopThree"  style="border:0.06rem solid rgba(211,209,209,1);">
            <div class="theLastTen theLastThreeBase">66</div>
            <img class="logo" src="./images/list/bd_dwy_img.png" alt="" srcset="" style="background: pink">
          </div>
        </div>
        <div class="center">
          <div class="title needEllipsis">c长沙碳矿机械厂</div>
          <div class="votes">13212票</div>
        </div>
        <div class="right">
          <div class="button">投票投票</div>
        </div>
      </a>
    </div>
    
    <div class="list">
      <a class="theSecondItem">
        <div class="theSecondLeft">
          <div class="logoGroup" style="border:0.06rem solid rgba(250,224,75,1);">
            <div class="theLastTen theLastThreeBase">66</div>
            <img class="logo" src="" alt="" srcset="" style="background: pink">
          </div>
          <div class="title needEllipsis">耐克耐克耐克耐克耐克耐克耐克</div>
        </div>
        <div class="theSecondRight">
          <div class="brandGroup">
            <div class="brand needEllipsis">晨阳科技有限公司晨阳科技有限公司</div>
            <div class="button">申请奖牌</div>
          </div>
          <div class="industry needEllipsis">长沙碳矿机械厂</div>
          <div class="url needEllipsis">http://www.10pinpaiwang.com</div>
        </div>
      </a>
      <a class="theSecondItem">
        <div class="theSecondLeft">
          <div class="logoGroup" style="border:0.06rem solid rgba(250,224,75,1);">
            <div class="topThree">
              <img src="./images/list/bdxq_jpy_icon.png" alt="" srcset="">
            </div>
            <img class="logo" src="" alt="" srcset="" style="background: pink">
          </div>
          <div class="title needEllipsis">耐克耐克耐克耐克耐克耐克耐克</div>
        </div>
        <div class="theSecondRight">
          <div class="brandGroup">
            <div class="brand needEllipsis">晨阳科技有限公司晨阳科技有限公司</div>
            <div class="button">申请奖牌</div>
          </div>
          <div class="industry needEllipsis">长沙碳矿机械厂</div>
          <div class="url needEllipsis">http://www.10pinpaiwang.com</div>
        </div>
      </a>
    </div>
  </div>
  <div class="contactUnique">
    <div class="contactContent">
      <a class="common wechat">
        <img src="./images/newVote/mwx_btn_icon.png" alt="" srcset="">
      </a>
      <a class="common phone">
        <img src="./images/newVote/mkf_btn_icon.png" alt="" srcset="">
      </a>
      <a class="common activityDetails">
        <img src="./images/newVote/mcjhd_btn_icon.png" alt="" srcset="">
      </a>
      <a class="common share">
        <img src="./images/newVote/mhbfx_btn_icon.png" alt="" srcset="">
      </a>
      <div class="common openAndClose">
        <img src="./images/newVote/mwx_btn_icon.png" alt="" srcset="">
      </div>
    </div>
  </div>
  <div class="goTopUnique">
    <div class="goTopUniqueContent">
      <div class="goTop">
        <img src="./images/newVote/xfan_fhdb_img.png" alt="">
        <!-- 返回<br>顶部 -->
      </div>
    </div>
  </div>
  <div class="dialogUnique">
    <div class="mark">
      <div class="dialogUniqueContent"></div>
      <div class="close" id="close">
        <img src="./images/newVote/tpyz_gb_btn_icon.png" alt="" srcset="">
      </div>
    </div>
  </div>
  <div class="defaultHide voteValidate">
    <div class="dialogTitle">投票验证</div>
    <div class="refresh">
      <img src="./images/newVote/tpyz_sxtp_icon.png" alt="" srcset="">
    </div>
    <div class="notification">
      <img src="./images/newVote/tpyz_tslb_icon.png" alt="" srcset="">
      <div class="text">严禁刷票，经发现您的账号将无法启用</div>
    </div>
    <div class="logoImage">
      <img src="./images/logo2.png" alt="" srcset="">
    </div>
    <div class="brandName">耐克</div>
    <div class="info" style="margin-top: 54px;">您在30分钟后，即10：30可继续参与投票</div>
    <div class="copyUrlGroup">
      <div class="urlBox">
        <input class="urlModel" readonly="readonly" value="http://www.10pinpaiwang.com" />
      </div>
      <div class="getUrl" data-clipboard-target=".urlModel">复制</div>
    </div>
    <div class="validateImage">
      <img src="http://mzhengyang.10brandcn.com:82/captcha/clicaptcha.php?rand=m7738310677489313" alt="" srcset="">
    </div>
    <div class="validateRuleText">
      <p>请按 <span>“中企品牌”</span> 依次点击上面文字</p>
    </div>
    <div class="validateImageCode" style="margin-top: 0.25rem;">
      <div class="input">
        <input type="text" placeholder="请输入验证码" />
      </div>
      <div class="code border1px">
        <img src="" alt="" srcset="" style="background: pink">
      </div>
    </div>
    <div class="validateImageCodeText" style="margin-top: 0.22rem;">
      <div class="left">
        <img src="./images/newVote/tpyz_zq_icon.png" alt="" srcset="">
        <!-- <img src="./images/newVote/tpyz_cw_icon.png" alt="" srcset=""> -->
        <span class="error">输入验证码正确</span>
      </div>
      <div class="right">
        看不清，换一张
      </div>
    </div>
    <div class="know" style="width:5rem !important;">我知道了</div>
    <div class="know">
      我知道了
    </div>
  </div>
  
  <div class="defaultHide voteSuccess">
    <div class="title">投票成功</div>
    <div class="logoImage">
      <img src="./images/logo2.png" alt="" srcset="">
    </div>
    <div class="votes">3654票</div>
    <div class="brandName needEllipsis">品牌名称：晨阳科技品牌名称：晨阳科技</div>
    <div class="voteTime">投票时间：2019年07月18日   12:00:00</div>
    <div class="copyUrlGroup">
      <div class="urlBox">
        <input class="urlModel" readonly="readonly" value="asdasdas" />
      </div>
      <div class="getUrl" data-clipboard-target=".urlModel">复制链接</div>
    </div>
    <div class="know">
      我知道了
    </div>
  </div>

  <div class="defaultHide wechatDialog">
    <div class="qrCode">
      <img src="./images/newVote/m_wxewm_img.png" alt="" srcset="">
    </div>
  </div>

  <div class="defaultHide shareDialog">
    <div class="brand">智能阀门行业</div>
    <div class="qrCode">
      <img src="./images/newVote/m_wxewm_img.png" alt="" srcset="">
    </div>
  </div>

  <div class="defaultHide phoneDialog">
    <div class="title">提示</div>
    <div class="tips">确认拨打客服电话400-159-0958吗?</div>
    <div class="buttonGroup">
      <div class="btn closeSelf border1px">取消</div>
      <!-- <div class="line"></div> -->
      <a href="tel:400-159-0958" class="btn closeSelf">
        <div>确定</div>
      </a>
    </div>
  </div>

  <div class="defaultHide activityDetailsDialog">
    <div class="industry">中国机电能源仪器仪</div>
    <div class="dateRange">2019.07-2019.08</div>
    <img src="./images/vote/m_hdxqjb_img.png" class="bgBottomImg" alt="" srcset="">
  </div>

  <div class="toast voteSuccessToast">
    <div class="content">
      投票成功
    </div>
  </div>
</div>

</body>

</html>
<script>
  var voteInit = {
    scroll: function () {
      var header = $('.header')
      if ($(window).scrollTop() > 0) {
        header.css('background', '#A80108')
        $('.goTopUnique').css('display', 'block')
      } else {
        $('.goTopUnique').css('display', 'none')
      }
      $(window).scroll(function () {
        if ($(this).scrollTop() > 0) {
          header.css('background', '#A80108')
          $('.goTopUnique').css('display', 'block')
        } else {
          header.css('background', 'transparent')
          $('.goTopUnique').css('display', 'none')
        }
      })

      $('.goTop').click(function () {
        $('html,body').animate({
          scrollTop: 0
        }, 222)
      })
    },
    searching: function (text) {
      var sort = function (value) {
        var flag = true
        var list = $('.list').children()
        var headerH = $('.header').get(0).offsetHeight
        for (var i = 0; i < list.length; i++) {
          + function (i) {
            var arr = []
            var ps = $(list[i]).find('.title')
            var pss = $($(list[i]).find('.title'))
            for (var j = 0; j < ps.length; j++) {
              + function (j) {
                arr.push(pss.text())
              }(j)
            }
            if (arr.toString().toLowerCase().indexOf(value.toLowerCase()) != '-1' && value.length) {
              if (flag) {
                list[i].style.border = '0.06rem solid rgba(205,27,34,1)'
                $('html,body').animate({
                  scrollTop: list[i].offsetTop - headerH - 20
                }, 100)
                setTimeout(function () {
                  list[i].style.border = 'none'
                }, 5000)
                flag = null
              }
            } else {}
          }(i)
        }
      }
      // var searchTimer
      // $('.searching').on('input', function (e) {
      //   if (searchTimer) clearTimeout(searchTimer)
      //   searchTimer = setTimeout(function () {
      //     sort(e.delegateTarget.value)
      //   }, 133)
      // })
      if (!text) return
      var searchTimer
      if (searchTimer) clearTimeout(searchTimer)
      searchTimer = setTimeout(function () {
        sort(text)
      }, 133)
    },
    searchInit: function () {
      var init = {
        runOnce: function () {
          $('#input').submit(function (e) {
            e.preventDefault()
            e.stopPropagation()
          })
          var timer
          $('.searching').keypress(function (e) {
            if (e.which == 13) {
              clearTimeout(timer)
              timer = setTimeout(function () {
                init.setSearchHistory()
                voteInit.searchGo($('.searching').val())
              }, 233)
            }
          })
          $('.searching').focus(function (e) {
            $('.header').css('background', 'rgba(168,1,8,1)')
            $('.searchHistoryList').css('display', 'flex')
            init.searchListShow()
          })
          $('.content').click(function () {
            voteInit.none()
          })
        },
        getSearchHistory: function () {
          if (localStorage.getItem('searchHistory')) return JSON.parse(localStorage.getItem('searchHistory'))
          return []
        },
        setSearchHistory: function () {
          if (!$('.searching').val()) return
          var arr = init.getSearchHistory() || []
          arr.unshift($('.searching').val())
          localStorage.setItem('searchHistory', JSON.stringify(arr))
          init.searchListShow()
        },
        searchListShow: function () {
          var getLi = function (value) {
            return "<li>"+
            "        <div class='textGroup'>"+
            "          <img src=\"./images/detailsOfBrand/wks_ssh_icon.png\" alt=\"\" srcset=\"\">"+
            "          <div class='needEllipsis text'>" + value + "</div>"+
            "        </div>"+
            "        <img src=\"./images/detailsOfBrand/mjtzx_btn_icon.png\" alt=\"\" srcset=\"\" >"+
            "      </li>"
          }
          var html = ''
          var lists = init.getSearchHistory()
          for (var i = 0; i < lists.length; i++) {
            (function (i) {
              html += getLi(lists[i])
            })(i)
          }
          $('.searchHistoryList').html(html)
          init.setSearchHistoryLiEvent()
        },
        searchHistoryShowAndHide : function () {},
        setSearchHistoryLiEvent: function () {
          $('.searchHistoryList li').on('click', function () {
            var text = $(this).text().trim()
            voteInit.searchGo(text)
          })
        }
      }
      init.runOnce()
    },
    searchGo: function (text) {
      if (!text) return
      voteInit.searching(text)
      voteInit.none()
    },
    contactUnique: function () {
      var contactUnique = $('.contactUnique')
      var openAndClose = $('.openAndClose')
      var one = 0.8
      openAndClose.click(function () {
        console.log(contactUnique.height())
        if (contactUnique.height() <= one * 100 + 20) {
          openAndClose.find('img')[0].src = "./images/newVote/msq_btn_icon.png"
          $('.contactUnique').css('height', one * 5 + 0.2 + 'rem')
        } else {
          openAndClose.find('img')[0].src = "./images/newVote/mwx_btn_icon.png"
          $('.contactUnique').css('height', one * 1 + 0.2 + 'rem')
        }
      })
    },
    none: function () {
      if (($(window).scrollTop() > 0)) $('.header').css('background', 'rgba(168,1,8,1)')
      else $('.header').css('background', 'transparent')
      $('.searchHistoryList').css('display', 'none')
    },
    dialog: function () {
      var showDialog = function (name) {
        if (!$('.dialogUnique').is(':hidden')) {
          $('.dialogUniqueContent').children().addClass('defaultHide')
        }
        $('#close img').attr('src', './images/newVote/tpyz_gb_btn_icon.png')
        $('#close').show()
        $('.' + name).removeClass('defaultHide')
        $('.dialogUniqueContent').append($('.' + name))
        $('body').css('overflow-y', 'hidden')
        $('.dialogUnique').fadeIn(111)
      }
      var hideDialog = function (name) {
        $('.' + name).addClass('defaultHide')
        $('body').css('overflow-y', 'visible')
        $('.dialogUnique').hide()
        $('#close').show()
      }
      $('.close').click(function () {
        for (var i in $(this).prev().children()) {
          hideDialog($(this).prev().children()[i].className)
        }
        $('#close img').attr('src', './images/newVote/tpyz_gb_btn_icon.png')
      })
      $('.closeSelf').click(function () {
        hideDialog('phoneDialog')
        $('#close img').attr('src', './images/newVote/tpyz_gb_btn_icon.png')
      })
      $('.know').click(function () {
        hideDialog('voteValidate')
        hideDialog('voteSuccess')
        $('#close img').attr('src', './images/newVote/tpyz_gb_btn_icon.png')
      })
      
      $('.button').click(function () {
        console.log($(this))
        showDialog('voteValidate')
      })
      $('.getUrl').click(function () {
        var clipboard = new ClipboardJS('.getUrl')
        clipboard.on('success', function (e) {
          showToast('.voteSuccessToast')
        })
        clipboard.on('error', function (e) {
          alert('复制失败')
        })
      })
      $('.wechat').click(function () {
        showDialog('wechatDialog')
      })
      $('.share').click(function () {
        showDialog('shareDialog')
      })
      $('.phone').click(function () {
        showDialog('phoneDialog')
        $('#close').hide()
      })
      $('.activityDetails').click(function () {
        showDialog('activityDetailsDialog')
        $('#close img').attr('src', './images/newVote/yellow_close.png')
      })
    }
  }
  $(document).ready(function () {
    for (var i in voteInit) {
      voteInit[i]()
    }
  })
</script>